<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8" />
    <title>From data to Viz | Best tips</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta
      name="description"
      content="A classification of all possible chart types classified following the input data format."
    />
    <meta
      name="keywords"
      content="Data,Dataviz,Datavisualization,Plot,Chart,Graph,R,Python,D3,Learning,Caveat,Pitfall,Mistake,Classification"
    />
    <meta name="author" content="Yan Holtz and Conor Healy" />

    <!-- Control appearance when share by social media -->
    <meta property="og:title" content="From data to Viz | Best tips" />
    <meta property="og:image" content="img/patchwork/datatoviz_overview7.png" />
    <meta
      property="og:description"
      content="A classification of chart types based on their input data format."
    />
    <meta property="og:url" content="data-to-viz.com" />
    <meta property="og:type" content="website" />
    <link rel="icon" href="img/logo/data-to-viz.ico" />

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Custom fonts for this template -->
    <link
      href="vendor/font-awesome/css/font-awesome.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:400,700"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Kaushan+Script"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700"
      rel="stylesheet"
      type="text/css"
    />

    <!-- Custom styles for this template -->
    <link href="css/agency.css" rel="stylesheet" />
  </head>

  <body id="page-top">
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
      <div class="container">
        <a
          class="navbar-brand js-scroll-trigger"
          href="https://www.data-to-viz.com"
        >
          <img
            src="img/logo/typo.png"
            style="width: 30%; vertical-align: top"
          />
        </a>
        <button
          class="navbar-toggler navbar-toggler-right"
          type="button"
          data-toggle="collapse"
          data-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          Menu
          <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="nav-item">
              <a
                class="nav-link js-scroll-trigger"
                href="https://www.data-to-viz.com#explore"
                >Explore</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link js-scroll-trigger"
                href="https://www.data-to-viz.com#story"
                >Story</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-link js-scroll-trigger"
                href="https://www.data-to-viz.com#portfolio"
                >All</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link" href="caveats.html">Caveats</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="poster.html">Poster</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="about.html">About</a>
            </li>
            <li class="nav-item">
              <a
                class="nav-link js-scroll-trigger"
                href="https://www.data-to-viz.com#contact"
                >Contact</a
              >
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
      "
    >
      <script
        async
        data-uid="00710104fc"
        src="https://prodigious-trailblazer-3628.ck.page/00710104fc/index.js"
      ></script>
    </div>

    <!-- ======================== JAVASCRIPT SECTION =========================== -->

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Contact form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>

    <!-- Tom's script for button colors -->
    <script src="js/portfolio.js"></script>
    <script src="js/tree.js"></script>

    <!-- Load d3.js -->
    <script src="https://d3js.org/d3.v4.min.js"></script>

    <!-- By default, show the numeric tree -->
    <script>
      showTree("num");
    </script>

    <!-- Activate the bootstrap tooltip, must be after jQuery load -->
    <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>

    <script>
      function closeBanner() {
        event.stopPropagation(); // Stop the event from propagating to parent elements
        event.preventDefault(); // Prevent the default action (link navigation)
        document.getElementById("promo-banner").style.display = "none";
      }
    </script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-3"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "UA-79254642-3");
    </script>
    <script>
      var getOutboundLink = function (url) {
        gtag("event", "click", {
          event_category: "outbound",
          event_label: url,
          transport_type: "beacon",
          event_callback: function () {
            document.location = url;
          },
        });
      };
    </script>

    <!-- ======================================================================= -->
  </body>
</html>
